﻿@{
    ViewBag.Title = "title";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section scripts{
        <script src="~/Areas/Sys/ViewModels/Role.js"></script>
        <script type="text/javascript">
            using('validatebox');
            var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
            ko.bindingViewModel(new viewModel(data));
            var formatterPermit = function (value, row) {
                var html = '<a href="#" onclick=\'permissionTab(' + JSON.stringify(row) + ')\'><span class="icon icon-set1">&nbsp;</span>[编辑权限]</a>';
                html += '<a href="#" onclick=\'memberDialog(' + JSON.stringify(row) + ')\' style="margin-left:10px"><span class="icon icon-users ">&nbsp;</span>[管理成员]</a>';
                return html;
            };
        </script>
}
        <div class="z-toolbar">
            <a id="a_refresh" href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a>
            <a id="a_add"    href="#" plain="true" class="easyui-linkbutton" icon="icon-add" title="新增" data-bind="click:addClick">新增</a>
            <a id="a_edit"   href="#" plain="true" class="easyui-linkbutton" icon="icon-edit" data-bind="click:editClick" title="编辑">编辑</a>
            <a id="a_del"    href="#" plain="true" class="easyui-linkbutton" icon="icon-cross" title="删除" data-bind="click:deleteClick">删除</a>
            <a id="a_save"  href="#" plain="true" class="easyui-linkbutton" icon="icon-save" data-bind="click:saveClick" title="保存">保存</a>
        </div>
        
        <table id="gridlist" data-bind="datagrid:grid">
             <thead>  
                <tr>  
                    <th field="_id"  hidden="true"></th>  
                    <th field="RoleName"    align="left"    width="150" editor="{type:'validatebox',options:{required: true }}">角色名称</th>  
                    <th field="RoleCode"    align="left"    width="100"  editor="{type:'validatebox',options:{required: true }}">角色编码   </th>  
                    <th field="RoleSeq"     align="left"    width="100" editor="text" >排序   </th>
                    <th field="Description" align="left"    width="200" editor="text">描述     </th> 
                    <th field="Permit" align="center"    width="200" formatter="formatterPermit">操作     </th> 
                </tr>                            
            </thead>      
        </table> 

<script type="text/html" id="members-template">
    <div style="margin:5px;">
        <div style="border-bottom:1px solid #CCC; margin-bottom:5px;">
            <span id="role_name" class="icon32 icon-group32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:RoleName">角色名称</span> 
        </div>
        <div style="margin-bottom:10px;height:20px;">
            <label>描述：</label><input data-bind="value:Description" type="text" readonly=true class="z-txt" style="width:430px;color:#666;vertical-align:middle">
        </div>
        <div> 成员：</div>
        <select id="user_groups" data-bind="options:members,optionsText:memberText ,value:selectValue" size="10" style="width:475px; line-height:30px;height:195px;padding:5px"></select>
        <div style="margin-top:2px;"><a href="#" id="group_add" class="easyui-linkbutton" plain="true" iconCls="icon-group-add" data-bind="click:addClick">添加</a>
            <a href="#" class="easyui-linkbutton" id="group_delete" plain="true" iconcls="icon-group-delete" data-bind="click:deleteClick">删除</a>
            <a href="#" class="easyui-linkbutton" id="group_clear" plain="true" iconCls="icon-clear" data-bind="click:clearClick">清空</a>
        </div>
    </div>
    <div style="text-align:center;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>  
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> 
    </div>
</script>

<script type="text/html" id="choose-members-template">
    <div style="margin:5px;height:425px;overflow:auto;">
         <div style="border-bottom:1px solid #CCC; margin-bottom:5px;">
            <span class="icon32 icon-org32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;">
            机构成员<input type="checkbox" style="vertical-align:middle;margin-left:5px;" data-bind="checked:checkAllOrganize"/>&nbsp;全选</span> 
        </div>

        <ul style="margin:0;padding:0;clear:both" data-bind="foreach:organizes">
            <li style="float:left;list-style:none;margin:3px;"><input type="checkbox" data-bind="value:OrganizeCode,checked:Checked" style="vertical-align:middle" />&nbsp;<label data-bind="text:OrganizeName" ></label></li>
        </ul>

        <div style="border-bottom:1px solid #CCC; margin-bottom:5px;clear:both">
            <span class="icon32 icon-user32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;">
            用户成员<input type="checkbox" style="vertical-align:middle;margin-left:5px;" data-bind="checked:checkAllUser"/>&nbsp;全选</span> 
        </div>

        <ul style="margin:0;padding:0;clear:both" data-bind="foreach:users">
            <li style="float:left;list-style:none;margin:3px;"><input type="checkbox" data-bind="value:UserCode,checked:Checked" style="vertical-align:middle"/>&nbsp;<label data-bind="text:UserName"></label></li>
        </ul>
    </div>
    <div style="text-align:center;clear:both">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>  
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> 
    </div>
</script>

<script type="text/html" id="permission-template">
    <div class="container" style="margin:5px;height:525px;">
        <div>
            <span class="icon32 icon-group32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:role.RoleName">角色名称</span> 
            <span data-bind="text:role.Description" style="margin-left:10px;"></span>
        </div>
 
        <div class="easyui-tabs" data-bind="easyuiTabs:tab">  
            <div title="菜单权限" >
                <table id="gridlist" data-bind="treegrid:grid">
                    <thead>  
                        <tr>  
                            <th field="chk" checkbox="true"></th>
                            <th field="MenuName"    align="left"    width="240">菜单   </th>  
                            <th field="MenuCode"    align="left"    width="80" >编码   </th>  
                            <th field="Description" align="left"    width="200" >备注说明   </th>  
                        </tr>                            
                    </thead>      
                </table>   
            </div>

            <div title="按钮权限">
                <table data-bind="treegrid:grid2"></table>   
            </div>

            <div title="数据权限" >
                 <table data-bind="treegrid:grid3"></table> 
            </div> 

            <div title="字段权限" >
                 <table data-bind="treegrid:grid4"></table> 
            </div> 
        </div> 
    </div> 
    <div style="text-align:center;clear:both">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>  
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> 
    </div>
</script>